<template>
    <el-dialog :title="'整体标记'" v-model="dialogVisible" width="1200px" @close="dialogClose" class="file-tags-dialog" top="10vh">
        <div class="tags-container flex">
            <div class="left-container flex" >
                <el-carousel :autoplay="false"   v-loading="documentLoad" ref="carouselRef" >
                    <el-carousel-item v-for="(item,index) in documentInfo" :key="index">
                        <!-- <viewer :images="[item.imgPath]"> -->
                            <!-- <img :src="item.imgPath" alt=""> -->
                            <el-image  :src="item.imgPath" lazy   @click="ImgPreview(item.imgPath)" />
                        <!-- </viewer> -->
                    </el-carousel-item>
                </el-carousel>
                <div class="step-btn flexC">
                    <el-button @click="prevStep" :disabled="activeIndex == 0" plain  :icon="ArrowLeft" :loading="confirmLoading" >上一份</el-button>
                    <p class="step-text ellipsis" :title="activeObj?.name">{{ activeObj?.name }}</p>
                    <el-button @click="nextStep" :disabled="activeIndex == taskTable.length - 1" :loading="confirmLoading" plain  >
                        下一份<el-icon style="margin-left: 5px;"><ArrowRight /></el-icon>
                    </el-button>
                </div>
            </div>
            <div class="right-container">
                <el-form label-width="auto">
                    <el-form-item label="文件名称">
                        {{ activeObj?.name || '--' }}
                    </el-form-item>
                    <el-form-item label="类型">
                        {{ Alltags[activeObj?.tagTypeId] || tagtypeSMsg ||  '--' }}
                    </el-form-item>
                    <div class="tags-Type">
                        <el-radio-group v-model="activeObj.tagTypeId">
                            <el-form-item v-for="(item,key) in fileTypeList" :key="key" style="width: 100%;">
                                <div style="display: block;width: 100%;" :class="key">
                                    <p style="display: block;font-weight: 600;margin-bottom: 5px;">{{ key }}</p>
                                    <el-radio :value="citem.id" size="small" border v-for="(citem,index) in fileTypeList[key]" :key="index">{{citem.name}}</el-radio>
                                </div>
                            </el-form-item>
                        </el-radio-group>
                    </div>
                </el-form>
                <div class="tags-Type-confirm" align="center">
                    <el-button @click="confirmTagType" type="primary" :loading="confirmLoading" size="large">确认</el-button>
                </div>
            </div>
        </div>
        <!-- <div class="dialog-footer" align="right">
            <el-button @click="dialogClose">取消</el-button>
            <el-button type="primary">确定</el-button>
        </div> -->
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { ProjectTaskQuery, ProjectTaskImages, ProjectFileQuery, ProjectTaskFileType, ProjectTaskFileTag  } from "@/api/project";
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const confirmLoading = ref(false);
const carouselRef = ref(null);
const taskTable  = ref([]);
const tagsType = ref();
const route = useRoute();
const emit = defineEmits(['close']);
const activeIndex = ref();
const activeObj = ref({});
const documentInfo = ref([]);
const documentLoad = ref(false);
const fileTypeList = ref([]);
const Alltags = ref({});
// 标记以后 整体标记记录 全部标记
const tagtypeSMsg = ref("");
const fileTypeLoad = ref(false);

onMounted(() => {
    getFileTags();
});

const open = async (row) => {
    dialogVisible.value = true;
    tagsType.value = row.type
    await getTaskQuery();
    activeIndex.value = taskTable.value.findIndex(item => item.id == row.id);
    activeObj.value = {...taskTable.value[activeIndex.value]};
    
    TaskImages();
};


const TaskImages = async () =>{
    tagtypeSMsg.value = "";
    documentLoad.value = true;
    console.log(activeObj.value.id,'ProjectTaskImages',activeIndex.value);
    
    let result = await ProjectTaskImages( tagsType.value ==  1 ? {
        id: route.query.id,
        fileId: activeObj.value.id,
    }:{
        id: route.query.id,
        documentId:activeObj.value.id
    })
    documentLoad.value = false;
    if(result.errorCode == 0){
        documentInfo.value = result.data;
        let Arrays = []
        for (let i = 0; i < result.data.length; i++) {
            const element = result.data[i];
            if(Arrays.length == 0){
                Arrays.push(element.documentType)
            }else{
                if(Arrays.indexOf(element.documentType) != -1){
                    Arrays.push(element.documentType)
                }
            }
        }
        // console.log(Arrays,'Arrays',result.data);
        if(Arrays.length == result.data.length){
            activeObj.value.tagTypeId = Arrays[0];
            taskTable.value[activeIndex.value].tagTypeId = Arrays[0];
        }else{
            const map = new Map();
            tagtypeSMsg.value = result.data.map(item => Alltags.value[item.documentType]).filter(item => !map.has(item) && map.set(item, true))?.join('，');
        }

    }
}
const getFileTags = async () => {
    fileTypeLoad.value = true;
    let result = await ProjectTaskFileType({
        id: route.query.id,
        fileId: activeObj.value.id,
    })
    fileTypeLoad.value = false;
    Alltags.value = [];
    if(result.errorCode == 0){
        fileTypeList.value = result.data;
        console.log(fileTypeList.value,'fileTypeList');
        // Alltags.value = result.data.map(item => item.name);
        for (let key in result.data) {
            for (let j = 0; j < result.data[key].length; j++) {
                const element = result.data[key][j];
                Alltags.value[element.id] = element.name;
            }
        }
    }
}
// 图片 预览 
const ImgPreview = (src) => {
    proxy.$ViewerApi([src]);
}
const prevStep = () => {
    if(!activeObj.value.tagTypeId){
        return ElMessage.warning('请选择文件类型');
    }
    if(!taskTable.value[activeIndex.value]?.tagTypeId){
        confirmTagType(1)
    }else if(activeIndex.value > 0){
        activeIndex.value = activeIndex.value - 1;
        activeObj.value = {...taskTable.value[activeIndex.value],tagTypeId:activeObj.value.tagTypeId};
        TaskImages();
    }
}
const nextStep = () =>{
    if(!activeObj.value.tagTypeId){
        return ElMessage.warning('请选择文件类型');
    }
    if(!taskTable.value[activeIndex.value]?.tagTypeId){
        confirmTagType(2)
    }else if(activeIndex.value < taskTable.value.length - 1){
        activeIndex.value = activeIndex.value + 1;
        activeObj.value = {...taskTable.value[activeIndex.value],tagTypeId:activeObj.value.tagTypeId};
        TaskImages();
    }
}
// 标记提交  type 1 上一份 2 下一份 调用 提交方法
const confirmTagType = async (type) => {
    // 确认标签类型
    if(!activeObj.value.tagTypeId && activeObj.value.tagTypeId != 0) {
        // 发送确认请求
        return ElMessage.warning('请选择文件类型');
    }
    let tags = documentInfo.value.map((item) => {
        return {
            id: item.id,
            documentType: activeObj.value.tagTypeId
        }
    });
    confirmLoading.value = true;
    // 发送确认请求
    let result = await ProjectTaskFileTag({
        projectId: route.query.id,
        tags: tags
    })
    confirmLoading.value = false;

    if(result.errorCode == 0){
        ElMessage.success('操作成功！');
        if(activeIndex.value == taskTable.value.length - 1 && type != 1){
            dialogVisible.value = false;
            return;
        }
        if(type == 1){
            activeIndex.value = activeIndex.value - 1;
            taskTable.value[activeIndex.value].tagTypeId = activeObj.value.tagTypeId;
            activeObj.value = {...taskTable.value[activeIndex.value],tagTypeId:activeObj.value.tagTypeId};
            TaskImages();
        }else{
            taskTable.value[activeIndex.value].tagTypeId = activeObj.value.tagTypeId;
            nextStep();
        }
    }
}
const dialogClose = () => {
    documentInfo.value = [];
    activeObj.value = {};
    dialogVisible.value = false;
    activeIndex.value = null;
    tagtypeSMsg.value = "";
    emit('close');
}
// 获取 任务 列表
const getTaskQuery = async () => {
    let fun  = tagsType.value == 1 ? ProjectTaskQuery : ProjectFileQuery;
    const res = await fun({
        projectId: route.query.id,
    });
    if(res.errorCode == 0){
        taskTable.value = res.data.map(item =>{
            return {
                ...item,
               name: item.name || item.title,
            }
        });
    }
}
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.tags-container{
    min-height: 75vh;
    .left-container{
        flex: 1;
        flex-direction: column;
        .el-carousel {
            height: 100%;
            flex: 1;
            :deep(.el-carousel__container){
                height: 100%;
                .el-carousel__item{
                    &>div{
                        height: 100%;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img{
                            width: auto;
                            height: auto;
                            display: block;
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }
                }
            }
            :deep(.el-carousel__arrow){
                background-color: rgba(31,45,61,0.5);
                font-weight: 600;
            }
        }
        .step-btn{
            width: 80%;
            margin: 10px auto;
            justify-content: space-between;
            .step-text{
                flex: 1;
                text-align: center;
                margin: 0 20px;
            }
        }

    }
    .right-container{
        flex: 1;
        padding-left: 60px;
        :deep(.el-radio){
            margin-bottom: 10px;
            margin-right: 15px;
            border-width: 2px;
            .el-radio__input{
                display: none;
            }
            &:last-child{
                margin-right: 15px;
            }
        }
        .tags-Type{
            .论证文档{
                --el-color-primary: #409eff !important;
            }
            .招投标文件{
                --el-color-primary: #67c23a !important;
            }
            .采购文档{
                --el-color-primary: #249087 !important;
            }
            .售后维修{
                --el-color-primary: #92429D !important;
            }
          
            .论证文档, .招投标文件, .采购文档, .售后维修, .其他{
                :deep(.el-radio){
                    color: var(--el-color-primary);
                    border-color: var(--el-color-primary);
                    &.is-checked{
                        background-color: var(--el-color-primary);
                        .el-radio__label{
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>